// 忘记密码展示界面
<template>
  <div class="login_container">
    <!-- 图标区域 -->
    <div class="login_box">
      <div class="avatar_box">
        <img src="../assets/images/logo.png" alt="" />
      </div>

      <!-- 编辑用户新增对话框 visible.sync 控制对话框的显示-->

        <!-- 定义用户提交表单数据-->
        <h1  class="xyhzc">重置密码</h1>
        <el-form
          :model="addUserModel"
          :rules="rules"
          ref="addUserRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item prop="email">
            <el-input v-model="addUserModel.email" placeholder="请输入邮箱地址">邮箱地址</el-input>
          </el-form-item>
          <el-form-item  prop="phone">
            <el-input v-model="addUserModel.phone" placeholder="请输入电话号码">电话号码</el-input>
          </el-form-item>
          <el-form-item  prop="password">
            <el-input v-model="addUserModel.password" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item prop="password2">
            <el-input v-model="addUserModel.password2" type="password" placeholder="请确认密码" >密码确认</el-input>
          </el-form-item>
          <el-form-item>
          <el-button type="primary" @click="addUserBtn" class="el-button-zc">立即重置</el-button>
          </el-form-item>
            <el-form-item>
          <el-button @click="logout"  class="el-button-zc">立即登录</el-button>
          </el-form-item>
          
        </el-form>

      

    </div>
  </div>
</template>

<script>
export default {
  data() {
    //校验邮箱规则 rule校验规则   value校验的数据   callback回调函数
    const checkEmail = (rule, value, callback) => {
      //定义邮箱的正则表达式  JS中用/来表示正则表达式的开始和结束
      const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/;
      //正则表达式语法校验  test(xx) 校验成功 返回true  校验失败返回false
      if (emailRege.test(value)) {
        //表示邮箱合法 正确返回
        return callback();
      }
      callback(new Error("请填写正确的邮箱地址"));
    };

    //校验手机号的邮箱规则
    const checkPhone = (rule, value, callback) => {
      //定义校验手机号的正则语法
      const phoneRege = /^1[34578][0-9]{9}$/;
      if (phoneRege.test(value)) {
        return callback();
      }
      callback(new Error("请填写正确的手机号"));
    };

    const checkPassword = (rule, value, callback) => {
      if (this.addUserModel.password !== value)
        return callback(new Error("2次密码输入不一致"));
      //否则校验成功
      callback();
    };

    return {
      queryInfo: {
        query: "",
        pageNum: 1,
        pageSize: 5,
      },
      userList: [],
      //记录总数是数值类型
      total: 0,
      dialogVisible: false,
      addUserModel: {
        username: "",
        password: "",
        password2: "",
        email: "",
        phone: "",
      },
      //数据校验规则
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
        ],
        password2: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
          { validator: checkPassword, trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
          { validator: checkPhone, trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
          { validator: checkEmail, trigger: "blur" },
        ],
      },
      updateDialogVisible: false,
      //定义修改用户数据封装
      updateUserModel: {},
    };
  },
  methods: {
    async getUserList() {
      const { data: result } = await this.$http.get("/user/list", {
        params: this.queryInfo,
      });
      if (result.status !== 200) return this.$message.error("用户列表查询失败");
      //{query: "", pageNum: 1, pageSize: 5, total: 7, rows: Array(5)}
      this.userList = result.data.rows;
      this.total = result.data.total;
    },
    //校验用户数据
    addUserBtn() {
      this.$refs.addUserRef.validate(async (valid) => {
        //如果校验失败 则停止数据
        if (!valid) return;
        //console.log(this.addUserModel)
        const { data: result } = await this.$http.post(
          "/user/pass",
          this.addUserModel
        );
        if(result.isValid == 212){
          console.log(result.isValid)
          return this.$message.error("请前往邮箱进行重置确认！");
        }else if(result.isValid == 213){
          console.log(result.isValid)
          return this.$message.error("重置失败！");
        }else{
          this.$message.success("重置成功!");
        }
        //重新获取用户列表
        this.getUserList();
      });
    },
    logout() {
      //1.删除token数据
      window.sessionStorage.clear();

      //2.跳转到用户登录页面  注意路径的写法 加/
      this.$router.push("/login");
    },
  }
};
</script>

<style lang="less" scoped>
.login_container {
  background-image: url(../assets/login.png);
  height: 100%;
}

.login_box {
  width: 600px;
  height: 450px;
//   background-color: aliceblue;
  border-radius: 3px;
  position: absolute;
  left: 45%;
  top: 55%;
  transform: translate(-50%, -50%);
}
.avatar_box {
  height: 150px;
  width: 300px;
  position: absolute;
  left: -30px;
  top: -1%;
  transform: translate(0, -100%);
  img {
    width: 100%;
    height: 100%;
  }
}

.demo-ruleForm {
  position: absolute;
  bottom: -80px;
  width: 100%;
  padding: 80px;
  box-sizing: border-box;
  }
  .el-button-zc{
      width: 340px;
  }
.xyhzc{
      position: absolute;
      left: 265px;
      top: 5%;
      transform: translate(0, -100%);
  }
.demo-ruleForm{
      position: absolute;
      left: -16px;
      top: 58%;
      transform: translate(0, -100%);
  }
</style>